<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熔断器状态监控</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .content {
            padding: 40px;
        }

        .section {
            margin-bottom: 40px;
            padding: 30px;
            background: #f8f9fa;
            border-radius: 10px;
            border-left: 5px solid #007bff;
        }

        .section h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.8em;
            display: flex;
            align-items: center;
        }

        .section h2::before {
            content: "🔍";
            margin-right: 10px;
            font-size: 1.2em;
        }

        .button-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .test-button {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            border: none;
            padding: 15px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
        }

        .test-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(79, 172, 254, 0.4);
        }

        .test-button:active {
            transform: translateY(0);
        }

        .status-button {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            color: #333;
        }

        .status-button:hover {
            box-shadow: 0 8px 25px rgba(168, 237, 234, 0.4);
        }

        .result-area {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.6;
            max-height: 400px;
            overflow-y: auto;
            margin-top: 20px;
            border: 2px solid #34495e;
        }

        .result-area::-webkit-scrollbar {
            width: 8px;
        }

        .result-area::-webkit-scrollbar-track {
            background: #34495e;
        }

        .result-area::-webkit-scrollbar-thumb {
            background: #7f8c8d;
            border-radius: 4px;
        }

        .loading {
            display: none;
            text-align: center;
            padding: 20px;
            color: #666;
        }

        .loading::after {
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .info-box {
            background: #e8f4fd;
            border: 1px solid #bee5eb;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .info-box h3 {
            color: #0c5460;
            margin-bottom: 10px;
            font-size: 1.3em;
        }

        .info-box p {
            color: #0c5460;
            line-height: 1.6;
        }

        .console-note {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 8px;
            padding: 15px;
            margin-top: 20px;
            color: #856404;
        }

        .console-note strong {
            color: #d63031;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🔍 熔断器状态监控</h1>
            <p>实时监控熔断器状态变化和控制台输出</p>
        </div>

        <div class="content">
            <!-- 状态查询区域 -->
            <div class="section">
                <h2>熔断器状态查询</h2>
                <div class="info-box">
                    <h3>📊 功能说明</h3>
                    <p>点击下方按钮可以查询当前所有熔断器的状态信息，详细信息将在控制台输出。</p>
                </div>
                
                <div class="button-group">
                    <button class="test-button status-button" onclick="getCircuitBreakerStatus()">
                        🔍 查询熔断器状态
                    </button>
                </div>

                <div class="console-note">
                    <strong>📝 注意：</strong> 详细的熔断器状态信息将在服务器控制台输出，请查看后台日志获取完整信息。
                </div>
            </div>

            <!-- 熔断器测试区域 -->
            <div class="section">
                <h2>熔断器测试</h2>
                <div class="info-box">
                    <h3>🧪 测试说明</h3>
                    <p>执行以下测试可以触发熔断器状态变化，每次测试完成后会自动在控制台输出熔断器状态。</p>
                </div>
                
                <div class="button-group">
                    <button class="test-button" onclick="testSlowResponse()">
                        🐌 慢响应测试
                    </button>
                    <button class="test-button" onclick="testErrorResponse()">
                        ❌ 异常测试
                    </button>
                    <button class="test-button" onclick="testUnavailableResponse()">
                        🚫 服务不可用测试
                    </button>
                    <button class="test-button" onclick="testComprehensive()">
                        🔄 综合测试
                    </button>
                </div>
            </div>

            <!-- 结果显示区域 -->
            <div class="section">
                <h2>测试结果</h2>
                <div class="loading" id="loading">正在执行测试...</div>
                <div class="result-area" id="result">
                    等待测试结果...
                    
点击上方按钮开始测试，结果将在此处显示。
同时请关注服务器控制台的详细状态输出。
                </div>
            </div>
        </div>
    </div>

    <script>
        const API_BASE = '/circuit-breaker';
        
        function showLoading() {
            document.getElementById('loading').style.display = 'block';
            document.getElementById('result').style.display = 'none';
        }
        
        function hideLoading() {
            document.getElementById('loading').style.display = 'none';
            document.getElementById('result').style.display = 'block';
        }
        
        function displayResult(data) {
            const resultArea = document.getElementById('result');
            resultArea.textContent = JSON.stringify(data, null, 2);
            hideLoading();
        }
        
        function displayError(error) {
            const resultArea = document.getElementById('result');
            resultArea.textContent = `错误: ${error.message}`;
            hideLoading();
        }

        // 查询熔断器状态
        async function getCircuitBreakerStatus() {
            showLoading();
            try {
                const response = await fetch(`${API_BASE}/status`);
                const data = await response.json();
                displayResult(data);
                
                // 提示用户查看控制台
                setTimeout(() => {
                    alert('✅ 熔断器状态信息已在服务器控制台输出！\n请查看后台日志获取详细信息。');
                }, 500);
            } catch (error) {
                displayError(error);
            }
        }

        // 慢响应测试
        async function testSlowResponse() {
            showLoading();
            try {
                const response = await fetch(`${API_BASE}/test-slow-response?delay=3000&times=2`);
                const data = await response.json();
                displayResult(data);
            } catch (error) {
                displayError(error);
            }
        }

        // 异常测试
        async function testErrorResponse() {
            showLoading();
            try {
                const response = await fetch(`${API_BASE}/test-error-response?errorRate=80&times=5`);
                const data = await response.json();
                displayResult(data);
            } catch (error) {
                displayError(error);
            }
        }

        // 服务不可用测试
        async function testUnavailableResponse() {
            showLoading();
            try {
                const response = await fetch(`${API_BASE}/test-unavailable-response?times=3`);
                const data = await response.json();
                displayResult(data);
            } catch (error) {
                displayError(error);
            }
        }

        // 综合测试
        async function testComprehensive() {
            showLoading();
            try {
                const response = await fetch(`${API_BASE}/comprehensive-test`);
                const data = await response.json();
                displayResult(data);
            } catch (error) {
                displayError(error);
            }
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🔍 熔断器状态监控页面已加载');
            console.log('📝 提示：熔断器详细状态信息将在服务器控制台输出');
        });
    </script>
</body>
</html>
